<template>
	<div class="white-box">
		<div class="si-one">
			<p>角色名称</p>
			<el-input v-model="value_text" placeholder="请输入角色名称" clearable />
		</div>
		<div class="mra-box">
			<loading-small v-if="loading"></loading-small>
			<el-empty description="暂无权限配置项" v-if="checkArr.length == 0 && !loading" />
			<template v-if="checkArr.length > 0 && !loading">
				<el-tree ref="treeRef" :data="checkArr" show-checkbox node-key="mod_id" default-expand-all
					:props="defaultProps" />
			</template>
		</div>

		<div class="foot-btn flexs-center">
			<el-button type="primary" :loading="search_btn" @click="handleConfirm">确定添加</el-button>
			<el-button type="default" plain :loading="search_btn" @click="resetChecked">重置</el-button>
		</div>
	</div>

	<go-back></go-back>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		onMounted,
		onBeforeUnmount
	} from "vue"
	import {
		useRouter
	} from "vue-router"
	import LoadingSmall from "@components/LoadingSmall.vue"
	import GoBack from "@components/GoBack.vue"

	const router = useRouter()
	const {
		proxy
	} = getCurrentInstance()

	const roles = ref(null)
	onMounted(() => {
		roles.value = sessionStorage.getItem("ROLES") ? JSON.parse(sessionStorage.getItem("ROLES")) : null
		if (roles.value != null) {
			value_text.value = roles.value.name
			getCheck()
		} else {
			proxy.$message({
				message: "异常访问，自动返回上一页",
				type: "error"
			})
			router.go(-1)
		}
	})

	onBeforeUnmount(() => {
		treeRef.value = null
	})

	const value_text = ref("")
	const loading = ref(false)
	const search_btn = ref(false)
	const treeRef = ref(null)
	const defaultProps = ref({
		children: "children",
		label: "title",
	})

	const handleConfirm = () => {
		let nodes = treeRef.value.getCheckedNodes(false, true) // 获取选中node数组
		console.log("nodes",nodes)
		if (value_text.value == "") {
			proxy.$message({
				message: "请输入角色名称",
				type: "warning"
			})
			return
		}
		if (!nodes || nodes.length == 0) {
			proxy.$message({
				message: "请勾选角色权限",
				type: "warning"
			})
			return
		}
		let arrs = []
		for (let i = 0; i < nodes.length; i++) {
			if(nodes[i].children.length<=0){
				arrs.push(nodes[i].mod_id)
			}
			
		}

		search_btn.value = true
		proxy.$axios
			.post("admin/system/role/update", {
				id: roles.value.id,
				name: value_text.value,
				menus_id: arrs,
				// sort:1
			})
			.then((res) => {
				search_btn.value = false
				if (res.data.code == 200) {
					router.push("/System/Role")
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {
				search_btn.value = false
			})
	}
	const resetChecked = () => {
		treeRef.value.setCheckedKeys([], false)
	}

	//角色权限
	const checkArr = ref([])

	function getCheck() {
		proxy.$axios.get("common/dataSelect/menuSelect").then(res => {
			if (res.data.code == 200) {
				// checkArr.value = res.data.data.data
				getMenu(res.data.data)
			} else {
				proxy.$message({
					message: res.data.msg,
					type: "error"
				})
			}
		})
	}

	function getMenu(arr) {
		proxy.$axios
			.get("admin/system/role/detail", {
				params: {
					id: roles.value.id,
				},
			})
			.then((res) => {
				if (res.data.code == 200) {
					let result = res.data.data.menus_id
					checkArr.value = arr
					// let numer_arrs = recursionArrs(result)
					setTimeout(() => {
					    treeRef.value.setCheckedKeys(result, false) // 设置选中的节点
					}, 100)
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
	// 递归多维数组对象
	function recursionArrs(menuTreeList, menuList = []) {
	    for (let item of menuTreeList) {
	        if (item.url != null) {
	            menuList.push(item)
	        }
	        if (item.children && item.children.length > 0) {
	            recursionArrs(item.children, menuList)
	        }
	    }
	    return menuList
	}
</script>
<script>
	export default {
		name: "ManageRoleEdit",
	}
</script>

<style lang="less" scoped>
	.white-content {
		padding-bottom: 40px;
	}

	:deep(.el-tree-node) {
		box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
		padding: @padding-md @padding-md;
		border-radius: @radius-xs;
		margin-bottom: @margin-mdl;
		flex: none;
		width: 100%;

		& .el-tree-node {
			box-shadow: 0 0px 0px;
			padding: 0;
			margin-bottom: 0;
			border-radius: 0;
		}

		.el-checkbox__inner {
			width: 18px;
			height: 18px;

			&::after {
				width: 4px;
				height: 9px;
				left: 6px;
				top: 1px;
			}
		}

		.el-tree-node__content {
			margin-bottom: @margin-xs;
			padding-left: 0;

			&:hover {
				background: none !important;
			}
		}

		.el-tree-node__children {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
		}
	}

	.mra-box {
		border-radius: @radius-xs;
		margin: @margin-xl 0px;

		.mar-item {
			box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
			padding: @padding-md @padding-md 0px;
			border-radius: @radius-xs;
			margin-bottom: @margin-mdl;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>